<template>
  <div>
    <navigationBar :search-content="searchValue" :showSearch="false" @search="handleNavSearch"/>
    <div class="search-container">
      <div class="logo-row">
        <v-btn
          depressed
          text
          plain
          height="auto"
          :ripple="false"
          to="/">
          <v-img
            class="logo" alt=""
            :src="require(`@/assets/image/logo_dark.svg`)"/>
        </v-btn>
      </div>
      <div class="search-field-row">
        <div class="search-field">
          <v-text-field
            v-model="searchFieldValue"
            rounded
            filled
            height="50"
            single-line
            label="请输入关键词"
            @keydown.enter="doSearch">
            <template v-slot:append>
              <v-menu offset-y rounded="lg">
                <template v-slot:activator="{ on, attrs }">
                  <v-btn
                    plain
                    text
                    height="50"
                    v-bind="attrs"
                    v-on="on">
                    {{ searchTypeText }}
                    <v-icon
                      size="10">
                      fas fa-chevron-down
                    </v-icon>
                  </v-btn>
                </template>
                <v-list dense>
                  <v-list-item
                    v-for="(item, index) in ['课程', '讲师', '博客']"
                    :key="item"
                    @click="handleSearchTypeSelect(index)">
                    <v-list-item-title>{{ item }}</v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-menu>
              <v-btn
                icon
                plain
                @click="doSearch">
                <v-icon
                  color="primary"
                  size="24">
                  fas fa-search
                </v-icon>
              </v-btn>
            </template>
          </v-text-field>
        </div>
      </div>
      <searchResult v-if="searchType !== null" :search-content="searchValue" :type="searchType"/>
    </div>
  </div>
</template>

<script>
    import navigationBar from "@/components/navigationBar/navigationBar";
    import searchResult from "@/views/search/searchResult/searchResult";
    import {getCourseBasicInfo, getCourseIntroduce, searchCourses} from "@/api";

    export default {
        name: "search",
        components: {
            navigationBar, searchResult
        },
        data() {
            return {
                searchValue: '', //搜索内容
                searchType: null, //搜索类型
                searchFieldValue: '', //搜索输入框的值
            }
        },
        methods: {
            // 初始化
            init() {
                this.searchFieldValue = this.searchValue = this.$route.query.key ?? '';
                this.searchType = this.$route.query.type ?? 0;
            },
            // 导航栏搜索事件
            handleNavSearch(searchValue) {
                this.searchValue = searchValue;
            },
            // 执行搜索
            doSearch() {
                this.$router.replace(`/search?key=${this.searchFieldValue}&type=${this.searchType}`);
                this.$forceUpdate();
            },
            // 搜索类型选择事件
            handleSearchTypeSelect(searchType) {
                if (searchType !== this.searchType) {
                    this.searchType = searchType;
                    this.$router.replace(`/search?key=${this.searchFieldValue}&type=${this.searchType}`);
                    this.$forceUpdate();
                }
            }
        },
        computed: {
            // 屏幕宽度实时数值
            windowWidth() {
                return this.$store.state.screenWidth + 5;
            },
            // 搜索类型列表的文字
            searchTypeText() {
                return ['课程', '讲师', '博客'][this.searchType];
            },
        },
        watch: {
            $route() {
                this.init();
            },
        },
        async mounted() {
            this.init();
        }
    }
</script>

<style lang="scss" scoped>
  @import "search";
</style>